<template>
    <div class="register-div">
        <div style="padding: 0 12px 0 12px">
            <el-row :gutter="24">
                <!-- 左边是介绍和图片 -->
                <el-col :span="16">
                    <div class="register-introduce">

                    </div>
                </el-col>
                <!-- 右边是表单 -->
                <el-col :span="8" align="center">
                    <div class="register-frame">
                        <el-form :inline="true" ref="registerForm" :model="registerForm" :rules="registerRules"
                                 class="register-form">
                            <el-form-item prop="username">
                                <el-input v-model="registerForm.username" type="text" auto-complete="off"
                                          placeholder="用户名" style="width: 300px">
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="phonenumber">
                                <el-input v-model="registerForm.phonenumber" type="text" auto-complete="off"
                                          placeholder="手机号" style="width: 300px">
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="captcha">
                                <el-input v-model="registerForm.captcha" type="text" auto-complete="off"
                                          placeholder="验证码" style="width: 300px">
                                    <template #suffix>
                                        <el-button round>发送验证码</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model="registerForm.password"
                                          type="password" auto-complete="off"
                                          placeholder="密码" style="width: 300px">
                                </el-input>
                            </el-form-item>
                            <div>
                                <el-button style="background-color: darkgray">注册</el-button>
                            </div>
                            <div>
                                <p>点击 “注册” 即表示您同意并愿意遵守</p>
                                <a href="#">用户协议 </a>
                                和
                                <a href="#">隐私政策</a>
                            </div>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "register",
        data() {
            const checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                registerForm: {
                    username: "",
                    password: "",
                },
                registerRules: {
                    username: [
                        {required: true, trigger: "blur", message: "请输入您的账号"}
                    ],
                    phonenumber: [
                        {validator: checkPhone, trigger: "blur"},
                    ],
                    captcha:[
                        {required: true, trigger: "blur", message: "请输入验证码"}
                    ],
                    password: [
                        {required: true, trigger: "blur", message: "请输入您的密码"}
                    ],
                },
            }
        }

    }
</script>

<style lang="scss" scoped>
    .register-div {
        width: 100%;
        height: 100%;
        background-image: url("/src/assets/images/register-background.jfif");
        background-size: 67% 100%;
        background-repeat: no-repeat;

        .register-introduce{
        }

        .register-frame {
            margin-top: 20%;
            border: 2px solid;
            border-radius: 25px;

            .register-form {
                margin-top: 10%;
                width: 300px;
                height: 460px;
            }
        }
    }
</style>
